<template>
	<view class="x-popup-mask" :class="{ 'x-popup--show': state }" @tap="hide" @mousemove.stop>
		<view class="x-popup-content" :style="style" :class="['x-popup-content-' + props.mode]" @tap.stop>
			<slot />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, nextTick } from 'vue';
const props = withDefaults(defineProps<{
	modelValue: boolean,
	height?: string|number,
	limit?: number
	mode?: 'top' | 'bottom' | 'center'
	round?: number
	customStyle?: Record<string, any> | string
	clickMaskHide?: boolean
}>(), {
	autoLoad: false,
	mode: 'bottom',
	round: 20,
	clickMaskHide: true
});
const state = ref(false);
const style = ref({
	...props.customStyle
});
switch (props.mode) {
	case 'top':
		style.value.borderBottomLeftRadius = `${props.round}px`;
		style.value.borderBottomRightRadius = `${props.round}px`;
		break;
	case 'bottom':
		style.value.borderTopLeftRadius = `${props.round}px`;
		style.value.borderTopRightRadius = `${props.round}px`;
		break;
	case 'center':
		style.value.borderTopLeftRadius = `${props.round}px`;
		style.value.borderTopRightRadius = `${props.round}px`;
		style.value.borderBottomLeftRadius = `${props.round}px`;
		style.value.borderBottomRightRadius = `${props.round}px`;
		break;
}
if (props.height) {
	style.value.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
}
const emit = defineEmits(['update:modelValue', 'show', 'hide']);

const showEvent = () => {
	emit('show');
}
const hideEvent = () => {
	emit('hide');
}
const hide = () => {
	if(props.clickMaskHide){
		emit('update:modelValue', false);
		emit('hide',{
			type: 'mask'
		});
	}
}
watch(()=>props.modelValue,(val:boolean) => {
	state.value = val;
	if (val) {
		showEvent();
	} else {
		nextTick(() => {
			hideEvent();
		})
	}
})
</script>

<style lang="scss" scoped>
.x-popup {
	&-mask {
		--x-popup-bg: #fff;
		overflow: hidden;
		position: fixed;
		left: 0;
		right: 0;
		top: 100%;
		bottom: 0;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0);
		transition: background-color .3s;
	}

	&-content {
		position: fixed;
		top: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		background-color: var(--x-popup-bg);
		background-image: var(--x-popup-bg-image);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
		transition: all .5s;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		&-top {
			top: -100%;
			bottom: auto;
		}

		&-bottom {
			top: 100%;
			bottom: -100%;
		}

		&-center {
			top:50%;
			left: -100%;
			transform: translate(-50%, 0);
		}
	}

	&--show {
		top: 0;
		background-color: var(--xl-mask);

		.x-popup-content {
			&-top {
				top: 0;
				left: 0;
				right: 0;
				bottom: auto;
			}

			&-bottom {
				top: auto;
				bottom: 0;
				left: 0;
				right: 0;
			}

			&-center {
				left: 50%;
				top: 50%;
				right: auto;
				bottom: auto;
				transform: translate(-50%, -50%);
			}
		}
	}
}</style>